chillJS - tutorials: Element properties

Element identifiers

The Element.id represents the element's identifier. It must be unique in a Layer, and is often used to retreive the Element using Layer.getElementByID method.

You can use the same id for multiple elements in a Layer, but it's hardly not recommended.

Every Element has a unique id: Element.uuid. This is a read-only property.

Element classes

You can add multiple properties to the elements with classes. First you need to create a new class, then add it to the Element.classList.

Chill.createClass('myClass', {
	width: 100,
	height: 80,
	flow: 'vertical',
	background: '#ff0000'
});

Chill.createClass('anotherClass', { width: 200 });

element1.classList.add('myClass');
element2.addClass('myClass', 5); // shorthand for classList.add
element2.addClass('anotherClass', 10); // element2's width will be 200

see demo

There are also Element.removeClass and Element.toggleClass methods. For precedence, you can specify the priority of the class, when you add it to the Element. If the order id is not given, it will be added as the highest priority.

Element positioning

The chillJS positioning scheme is similar to the well-known HTML positioning system. There are no confusing properties like float, display or position, however you can achieve everything you could in HTML styling and even more.

First, you need to decide, if you want to place the Element directly or let it flow. The Element.flow property indicates whether the Element is flowing or not. It's "none" by default, but it also can be "horizontal" or "vertical". The Element.wrap boolean property (true by default) indicates if the flowing Element should be in the next "row" or "column" (based on the flow type) whenever it overflows.

You can add space between the flowing elements with the Element.margin property.

On the other hand, if you want to specify the exact place of the Element, you should use the Element.x and Element.y properties.

If the Element.flow property is horizontal or vertical, the Element.x and Element.y properties are ignored.

The Element.offsetX and Element.offsetY properties can be very useful in many ways. If you want to move a flowing Element or float it to the right.

element.edit({
	x: '100%',
	offsetX: '-100%'
});

see demo

The x, marginLeft, marginRight properties percentage value are relative to the parent's width, the y, marginTop, marginBottom to the parent's height, the offsetX to the element's width, and the offsetY to the element's height.

You can also set the align of the Element with the Element.horizontalAlign and Element.verticalAlign properties.

Element sizing

The Element.width and Element.height properties are used for define the horizontal and vertical size of the elements. These values can be numeric, percentage (relative to the parent), "fit", which means the Element fills the remaining space of the Element.parentElement or "auto".

In order to use the "auto" value, the Element must have measureWidth and measureHeight methods. These are used for calculate the size, and must returns numeric value.

You can set the minimum and maximum values too, just like in the HTML styling. The properties used for this are: Element.minWidth, Element.maxWidth, Element.minHeight and Element.maxHeight. These also can be numeric or percentage (relative to the parent).

Element transforming

The Element.angle property rotates the Element. It requires a numeric value between 0 and 360. Unlike most libraries, this property is in degree, not radian. For scaling the Element, you can use the Element.scaleX and Element.scaleY properties. These are 1.0 by default, which produces the 1:1 size of the Element.

The Element.scaleX and Element.scaleY properties doesn't affect the flow.

The Element.flipX and Element.flipY boolean properties are used for flip the Element horizontally or vertically.

Element styling

There are a bunch of common property for customizing the Element, such as the Element.background, which is used for the background color. You can also set the border of the Element, with the Element.borderWidth, Element.borderStyle and Element.borderColor properties. If you only want to add border to the top, you can use the Element.borderTopWidth and the others. The Element.opacity specifies the transparency of the Element.